<template>
  <div v-loading="loading">
    <!--      html  -->
    <div class="list-table">
      <el-table
        :data="list"
        border
        stripe
        style="width: 100%"
        empty-text="暂无数据"
      >
        <el-table-column prop="createTime" label="创建时间" fixed="left" />
        <el-table-column prop="stockId" label="卡券批次号" />
        <el-table-column prop="couponName" label="卡券名称" />
        <el-table-column prop="amount" label="预制数量" />
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status===1" class="app-text-color-primary">处理中</span>
            <span v-if="scope.row.status===2" class="app-text-color-success">已完成</span>
            <span v-if="scope.row.status===3" class="app-text-color-danger">失败</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column prop="userName" label="创建人" />
        <el-table-column prop="finishTime" label="完成生产时间" />
        <!--        <el-table-column prop="taskType" label="导出源">-->
        <!--          <template slot-scope="scope">-->
        <!--            <span>{{ taskTypeOptions[scope.row.taskType] }}</span>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column label="操作" width="80" fixed="right">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.status===2"
              type="text"
              size="small"
              @click="download(scope.row)"
            >下载
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <pagination-direction
        v-if="paginationConfig.total !== 0"
        :config="paginationConfig"
        @sizeschange="sizesChange"
        @pagechange="pageChange"
      />
    </div>

  </div>
</template>

<script>
import { preCreateHistory } from '../../../api/pre'
export default {
  data() {
    return {
      // 配置
      // 分页配置
      paginationConfig: {
        direction: 'center', // 分页位置
        layout: 'total, prev, pager, next, jumper', // 分页类型
        // pageSizes: [10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      // 状态
      loading: false,
      // 数据
      list: [], // 表格数据
      filterForm: {}
    }
  },
  computed: {},
  watch: {},
  beforeCreate() {
  },
  created() {
  },
  beforeMount() {
  },
  mounted() {
    this.fetchData()
  },
  beforeUpdate() {
  },
  update() {
  },
  activated() {
  },
  deactivated() {
  },
  beforeDestroy() {
  },
  destroyed() {
  },
  methods: {
    /**
     * 数据组
     */
    // 获取列表
    fetchData(page = this.paginationConfig.page,
      pageSize = this.paginationConfig.pageSize) {
      this.loading = true
      this.filterForm.page = page
      this.filterForm.pageSize = pageSize
      preCreateHistory(this.filterForm)
        .then((res) => {
          this.list = res.data.list
          this.paginationConfig.total = res.data.total
          this.paginationConfig.page = res.data.pageNum
        }).finally(() => {
          // this.$alert('待接口数据开发', '温馨提示', {
          //   confirmButtonText: '确定',
          //   center: true,
          //   type: 'warning',
          //   callback: action => {}
          // })
          this.loading = false
        })
    },

    // 分页sizes改变
    sizesChange() {
      this.fetchData()
    },

    // 分页page改变
    pageChange() {
      this.fetchData()
    },

    /**
     * 按钮组
     */
    // 下载对应文件
    download(row) {
      var alink = document.createElement('a')
      alink.href =
        process.env.VUE_APP_BASE_API +
        '/couponAdmin/coupon/preCreateFile?jobId=' +
        row.id +
        '&X-BUSINESS-TOKEN=' +
        this.$store.state.user.token
      alink.download = ''
      alink.click()
    }
    /**
     * 状态组
     */
    /**
     * 方法组
     */
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>
